<template>
	<div class="view-order">
		<el-button
			size="mini"
			:loading="loading"
			type="text"
			@click="onViewOrder"
			v-if="$tools.hasPermission('study:exam:studyExamStatisticsMember:pageList')"
		>
			查看
		</el-button>

		<el-dialog append-to-body modal-append-to-body title="考试记录" :visible.sync="visible" width="800px">
			<el-table :data="tableData" border>
				<el-table-column prop="score" label="考试成绩"></el-table-column>
				<el-table-column prop="quizTime" label="答题时间"></el-table-column>
				<el-table-column label="操作">
					<template #default="{row}">
						<el-button size="mini" type="text" @click="onExportExam(row.id)">
							导出
						</el-button>
						<el-button size="mini" type="text" @click="onViewExam(row.id)">
							查看
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog append-to-body modal-append-to-body :visible.sync="info.visible" fullscreen center>
			<el-button @click="info.visible = false">返回</el-button>
			<h3 class="title">{{ info.message.examName }}</h3>
			<div class="info">
				<div>姓名: {{ info.message.memberName }}</div>
				<div>得分: {{ info.message.score }}</div>
			</div>

			<div class="question" v-for="(item, index) in info.message.questions" :key="index">
				<div class="name">{{ index + 1 }}、{{ item.title }} 【{{ item.questionType }}】 ( {{ item.score }}分 )</div>

				<div class="options">
					<template v-for="name in ['A', 'B', 'C', 'D', 'E', 'F']">
						<div
							class="option"
							:class="{
								success: (item.answer || '').includes(name),
								danger: !(item.answer || '').includes(name) && (item.choiceAnswer || '').includes(name),
							}"
							:key="name"
							v-if="item['answer' + name]"
						>
							{{ name }}: {{ item["answer" + name] }}
						</div>
					</template>
				</div>

				<div class="answers">
					<div class="success">正确答案: 【{{ item.answer }}】</div>
					<div :class="item.answer === item.choiceAnswer ? 'success' : 'danger'">你的答案: 【{{ item.choiceAnswer }}】</div>
				</div>
			</div>

			<template #footer>
				<el-button type="danger" @click="info.visible = false">关闭</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import request from "@/common/request"

export default {
	name: "view-order",
	props: {
		id: {
			type: String,
			default: "",
		},
	},
	data() {
		return {
			visible: false,
			loading: false,
			tableData: [],

			info: {
				visible: false,
				loading: false,
				message: {
					score: 0,
					examName: "",
					memberName: "",
					questions: [],
				},
			},
		}
	},
	methods: {
		async onViewOrder() {
			await this.getExamRecord()
			this.visible = true
		},
		async onExportExam(id) {
			await request("eptpost", "/study/exam/studyMemberExam/exportDynamic", {
				headerList: [],
				dto: { recordId: id },
			})
		},
		async onViewExam(recordId) {
			await this.getExamInfo(recordId)
			this.info.visible = true
		},

		async getExamRecord() {
			this.loading = true

			try {
				const { code, data, msg } = await request("get", "/study/exam/studyExamStatisticsMember/page", {
					examId: this.$route.query.id,
					memberId: this.id,
				})
				if (code != 0) {
					throw new Error(msg)
				}
				this.tableData = data.records
				this.total = data.total
			} catch (error) {
				this.$message.error(error.message)
			} finally {
				this.loading = false
			}
		},
		async getExamInfo(recordId) {
			this.info.loading = true

			try {
				const { code, data, msg } = await request("get", "/study/exam/studyMemberExam/detail", {
					recordId,
				})
				if (code != 0) {
					throw new Error(msg)
				}
				this.info.message = data
			} catch (error) {
				this.$message.error(error.message)
			} finally {
				this.info.loading = false
			}
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.title {
	text-align: center;
	font-weight: 700;
	font-size: 24px;
	color: #333;
	margin-bottom: 10px;
}
.info {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 14px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	div {
		width: 30%;
	}
}

.question {
	padding-block: 20px;
	border-bottom: 1px solid #ccc;
	.name {
		margin-bottom: 10px;
	}
	.options {
		overflow: hidden;
		.option {
			float: left;
			margin-right: 30px;
			margin-bottom: 3px;
		}
		.success {
			color: #6ee37f;
		}
		.danger {
			color: #ff1200;
		}
	}
	.answers {
		margin-top: 10px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 20px;
		.success {
			color: #6ee37f;
		}
		.danger {
			color: #ff1200;
		}
	}
}
</style>
